<template>
  <div id="app">
    <div class="content">
      <div class="content_input">
        <div class="title">
          <p>KTV运营平台</p>
        </div>
        <el-input v-model="UserName" clearable placeholder="你的 ID"></el-input>
        <el-input class="pass" v-model="PassWord" clearable show-password placeholder="密码"></el-input>
        <div class="content_button">
          <el-button type="success" @click="SignIn">登入</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import axios from "axios";

    export default{
      name:'login',
      data() {
        return {
          UserName: '',
          PassWord: ''
        }
      },
      methods: {
        SignIn() {
          let that = this;
          let name = that.UserName;
          let password = that.PassWord;
          if (!name) {
            this.$notify.error({
              title: '错误',
              message: '用户名不能为空'
            });

          } else if (!password) {
            this.$notify.error({
              title: '错误',
              message: '密码不能为空'
            });
          } else {
            axios.post('http://120.24.48.65:8282/user/login',
                {
                  username:this.UserName,
                  password:this.PassWord
                }).then(response=>{
              console.log(response.data)
              if (response.data!=='') {
                localStorage.setItem('admin',JSON.stringify(response.data))//key:admin,value:response.data
                this.$router.replace('/homePage')
              }
              else{
                this.$notify.error({
                  title: '错误',
                  message: '用户名或密码错误'
                });
              }
            })
          }
        }
      }
    }
</script>
<style>
*{
  padding: 0;
  margin: 0;
}
#app{
  width: 100%;
  height: 780px;
  background-image: url("./img/login.png");
}
.content {
  width: 500px;
  height: 300px;
  box-sizing: border-box;
  padding: 0 50px;
  border-radius: 10px;
  border: solid #c1e8d7;
  box-shadow: 40px 40px 15px rgba(105, 105, 105, 0.07);
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: mymove 1s ease-in-out  alternate;
  overflow: hidden;
  transition: 1.5s;
}
.content_input {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content_button {
  margin-top: 10px;
}

el-input {
  margin-bottom: 25px;
}
.pass{
  margin-top:10px;
}
.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 30px;
  font-weight: bold;
  color: #606266;
}
</style>